<template>
  <div class='home_box'>
    <van-swipe @change="onChange" class='swiper_box'>
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          {{ current + 1 }}/4
        </div>
      </template>
    </van-swipe>
  </div>
</template>
<script>
// @ is an alias to /src
import {getBanner} from '@/api/api'
export default {
  name: "XXX",
  data() {
    return {
        current: 0,
    };
  },
  created() {
      getBanner().then(data=>{
          console.log(data)
      })
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
  components: {}
};
</script>
<style lang="less">
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .swiper_box{
      height: 300px;
      width: 340px;
      margin: auto;
      background: salmon;
  }
</style>